<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：首页-产品页面
 参数：
 事件：
-->
<template>
  <div class="product">
    <toolbar :view-title="viewTitle">
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        @click="this.$broadcast('goBack')">&nbsp;
      </div>
      <div
        class="rightButton"
        type="button"
        slot="right-button">
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <button class="btn-contrast" v-link='{path: "/peer/contrast"}'>对比<input type="text" :value="contranstSize"
                                                                            readonly class="chico-num"></button>
    <condition-filter :condition-list="conditionList" :active-index="currentConditionIndex"></condition-filter>
    <time-filter v-show="currentConditionIndex == 0" :time-list="timeList" class=""></time-filter>
    <div v-if="currentConditionIndex == 0" class="sub-title">
      <div class="sub-title-text">{{allData.subtTitle}}</div>
      <!-- <div class="filter-message-box clearfix">
        <a  v-if="defaultCategory !== ''" class="filter-condition" @click="showFilter('pinlei')" href="javascript:;">{{defaultCategory}}</a>
        <span>
          <a v-if="UrlParams.platform !== ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;" v-text="UrlParams.platform"></a>
          <a v-if="UrlParams.platform === ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">所有平台</a>
        </span>
        <a class="filter-condition" @click="showFilter('shijian')" href="javascript:;">{{startDate | formatDate}} - {{endDate | formatDate}}</a>
      </div> -->
      <div class="sub-title-time">{{startDate | formatDate}} - {{endDate | formatDate}}</div>
    </div>
    <product-table-view
      v-show="currentConditionIndex == 0"
      id="tableView"
      :thead="thead"
      :table-title="tableTitle"
      :grid-columns="gridColumns"
      :org-code="orgCode"
      :table-rows="tableRows"></product-table-view>
    <new-product-list v-show="currentConditionIndex == 1" :products="newProducts" :new-sub-title="newSubTitle" :org-code="orgCode" :default-category="defaultCategory"></new-product-list>
    <div v-show="currentConditionIndex == 2">
      <!-- <h3>预售监控</h3>
      <p>暂未开放，敬请期待！</p> -->
      <pre-sale :thead="thead"
      :table-title="tableTitle"
      :grid-columns="gridColumns"
      :org-code="orgCode"
      :table-rows="tableRows"></pre-sale>
    </div>
    <div v-show="currentConditionIndex == 3">
      <h3>假货监控</h3>
      <p>暂未开放，敬请期待！</p>
    </div>
    <filter-view v-show="filterOpenState"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"
                 :choose-platforms= "pingtai"
                 :choose-platforms-id= "pingtaiId"
                 :page-id="'productMonitor'">
    </filter-view>
    <div class="loading-box">
      <img src="../../../static/img/loading.gif" class="loading">
    </div>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import ConditionFilter from '../common/ConditionFilter.vue'
  import TimeFilter from '../common/TimeFilter.vue'
  // import ProductTableView from './TableLockedForProduct.vue'
  import ProductTableView from './ProductTableView.vue'
  import FilterView from '../common/FilterView.vue'
  import NewProductList from './NewProductList.vue'
  import PreSale from './PreSale.vue'

  export default{
    components: {
      Toolbar,
      ConditionFilter,
      TimeFilter,
      ProductTableView,
      FilterView,
      NewProductList,
      PreSale
    },
    data: function () {
      return {
        currentConditionIndexKey: '#lastProductConditionIndex',
        orgCode: '',
        saleUnit: '',
        allData: '',
        viewTitle: '爆款新品',
        timeList: [
          {'id': 0, 'value': 'day', 'text': '日'},
          {'id': 1, 'value': 'week', 'text': '周'},
          {'id': 2, 'value': 'month', 'text': '月'},
          {'id': 3, 'value': 'year', 'text': '年'}
        ],
        conditionList: [
          {'id': 0, 'value': 'myBrand', 'text': '爆款产品'},
          {'id': 1, 'value': 'allBrand', 'text': '新品上市'}
          // {'id': 2, 'value': 'allBrand1', 'text': '预售监控'}
          // {'id': 3, 'value': 'allBrand2', 'text': '假货监控'}
        ],
        tableRows: [],
        tableTitle: [],
        gridColumns: ['contrast', 'model', 'brand', 'sales', 'avg_price', 'sales_amount'],
        conditions: [],
        filterOpenState: false,
        newProducts: [],
        currentConditionIndex: window.localStorage.getItem(this.currentConditionIndexKey) || 0,
        currentTimeList: 0,
        height: '70vh',
        contranstSize: 0,
        hotSubTitle: '',
        newSubTitle: '',
        defaultOrgId: '',
        defaultCategory: '',
        defaultCategoryId: '',
        pingtai: '',
        pingtaiId: '',
        startDate: '',
        endDate: '',
        UrlParams: {
//          refresh: true,
          brand: '',
          brand_id: '',
          category_id: '',
          category: '',
          platform_id: '',
          platform: '',
          dateSeg: '',
          datePeriod: ''
        }
      }
    },
    created () {
      try {
        let lastConditionIndex = window.localStorage.getItem(this.currentConditionIndexKey)
        if (lastConditionIndex) {
          this.currentConditionIndex = parseInt(lastConditionIndex)
        }
      } catch (error) {
      }
    },
    computed: {
      thead: function () {
        return ['对比', '型号', '品牌', '销量' + this.saleUnit, '均价（元）', ' 销额（万元）']
      }
    },
    methods: {
      goBack: function () {
        window.localStorage.setItem(this.currentConditionIndexKey, 0)
        this.$router.go('/home')
      },
      showFilter: function () {
        this.filterOpenState = true
      },
      doFilter: function () {
        this.$broadcast('doFilter')
        this.filterOpenState = false
      },
//      爆款产品
      getTableData: function (params) {
        this.$http.post(window.interface.productMonitor.topSale, params).then(function (res) {
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          this.orgCode = data.org_code || ''
          this.saleUnit = data.saleUnit || ''
          this.startDate = data.startTime || ''
          this.endDate = data.endTime || ''
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = data.category || ''
          this.defaultCategoryId = data.category_id || ''
          this.pingtai = data.platformCnd || data.platform
          this.pingtaiId = data.platform_id || ''
          this.hotSubTitle = data.subtTitle
          this.tableRows = data.data
          this.contranstSize = data.contranst_size
          this.$dispatch('changeLoadingStatus', false)
          this.$broadcast('loadDataDone')
        })
      },
//      新品上市
      getnewLauchProduct: function (params) {
        this.$http.post(window.interface.productMonitor.newLauchProduct, params).then(function (res) {
          var data = res.json()
          this.allData = res.json()
          // this.UrlParams.startTime = data.startTime || ''
          // this.UrlParams.endTime = data.endTime || ''
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = data.category || ''
          this.defaultCategoryId = data.category_id || ''
          this.newSubTitle = data.subtTitle
          this.newProducts = data.data
          this.$dispatch('changeLoadingStatus', false)
        })
      }
    },
    events: {
//      切换类型
      'changeCondition': function (filterConditions) {
        this.currentConditionIndex = filterConditions
        window.localStorage.setItem(this.currentConditionIndexKey, this.currentConditionIndex)
      },
//      切换时间后重新获取数据
      'changeDate': function (id) {
        this.$dispatch('changeLoadingStatus', true)
        this.currentTimeList = id
        this.UrlParams.datePeriod = id
        // if (this.currentConditionIndex === 1) {
        //   this.getnewLauchProduct(this.UrlParams)
        // } else {
        //   this.UrlParams.startTime = ''
        //   this.UrlParams.endTime = ''
        this.getTableData(this.UrlParams)
        // }
      },
//      接收filter组件回传回来的值，然后再根据值重新请求页面数据
      'filterConditions': function (filterConditions) {
        this.UrlParams.brand = filterConditions.brand || ''
        this.UrlParams.brand_id = filterConditions.brand_id || ''
        this.UrlParams.category = filterConditions.category || ''
        this.UrlParams.category_id = filterConditions.category_id || ''
        this.UrlParams.platform = filterConditions.platform || ''
        this.UrlParams.platform_id = filterConditions.platform_id || ''
        this.UrlParams.brand_all = filterConditions.brand_all
        // this.UrlParams.dateSeg = 'other'
        // this.UrlParams.startTime = filterConditions.starttime || ''
        // this.UrlParams.endTime = filterConditions.endtime || ''
        document.getElementsByClassName('loading-box')[0].style.display = 'block'

//      爆款产品
        this.getTableData(this.UrlParams)
//      新品上市
        this.getnewLauchProduct(this.UrlParams)
      }
    },
    watch: {},
    ready: function () {
      document.getElementsByClassName('loading-box')[0].style.display = 'block'
      this.UrlParams.datePeriod = 'month'
//      爆款产品
      this.getTableData({datePeriod: 'month'})
//      新品上市
      this.getnewLauchProduct()
    }
  }
</script>

<style lang="scss" scoped>
  .product {
    margin-top: 6.31vh;
    margin-bottom: 7vh;

    .leftButton {
      padding-top: .3rem;
      width: .5rem;
      height: .5rem;
      background: url('../../../static/img/btn-back.png') no-repeat center / 100%;
    }

    .sub-title-text{
      height: .5rem;
      color: #333;
      line-height: .5rem;
      padding-left: .8rem;
      font-size: .32rem;
      background: url('../../../static/img/icon-kongtiao.png') no-repeat .3rem .08rem / .32rem .36rem;
    }

    .sub-title-time {
      margin-top: .1rem;
      padding-left: .7rem;
      background: url('../../../static/img/time-time.png') no-repeat .3rem center / .28rem .26rem;
      font-size: .26rem;
      color: #999;
    }

    .btn-contrast {
      padding: 0.11rem 0.3rem;
      position: fixed;
      right: 1.1rem;
      top: 0.35rem;
      color: #999;
      background: transparent;
      border-right: 1px solid #ececec;
      z-index: 999;
      font-size: 0.2rem;
    }

    .brandWatch {
      line-height: 1rem;
    }

    .chico-num {
      display: block;
      position: absolute;
      top: -0.25rem;
      right: 0.35rem;
      text-align: center;
      width: .35rem;
      height: .35rem;
      line-height: .35rem;
      background: red;
      border-radius: 50%;
      color: #fff;
      font-size: .25rem;
    }

    .brandTap {
      padding: 0.2rem 0.3rem;
      background: #ccc;
      border-right: 1px solid #eee;
    }

    .subBrandTap {
      border-right: 1px solid #333333;
    }

    .subBrandTap:last-child {
      border-right: none;
    }

    .brandActive {
      background: #00B0F0;
      color: #fff;
    }

    .subBrandActive {
      color: #00B0F0;
    }

    .brandTapWrap {
      text-align: center;
      font-size: .16rem;
    }
  }
  .sub-title {
    padding: .2rem;
    font-size: .32rem;
    color: #000;

  }

</style>
